'use strict';
import React, {Component} from 'react';
import {
    View,
    Image,
    ImageBackground,
    Dimensions,
    TouchableWithoutFeedback,
    StyleSheet,
    Text,
    TouchableOpacity,
    TextInput,
    ScrollView,
    TouchableHighlight,
    TouchableNativeFeedback,
    Switch,
} from 'react-native'
import Color from '../constant/color';
import ToolbarSetProperty from './comp.toolbar-setproperty';

const winHeight = Dimensions.get('window').height;

class SetDataSource extends React.Component {
    // 构造
    constructor(props) {
        super(props);
        this.navParams = this.props.navigation.state.params;
        this.state = {
            value: this.navParams.oldValue
        }
    }

    select(item) {
        this.setState({
            value: item
        })
    }

    render() {
        const navParams = this.navParams
        return (
            <View>
                <ToolbarSetProperty
                    navigation={this.props.navigation}
                    text={navParams.title}
                    oldValue={navParams.oldValue}
                    newValue={this.state.value}
                    complete={navParams.callback}
                />
                <ScrollView style={styles.body}>
                {
                    navParams.dataSource.map((item, i) => {
                        return (
                            <TouchableOpacity key={i} style={styles.input_view} onPress={this.select.bind(this, item)}>
                                <View style={{flexDirection: "row", alignSelf: "center"}}>
                                    <View style={styles.input_label_view}>
                                        <Text style={styles.input_label_text}>{item}</Text>
                                    </View>
                                    <View style={[styles.input_value_view, {justifyContent: "flex-end"}]}>
                                    {
                                        this.state.value === item ? <Image source={require('../../img/duigou.png')}/> : <View/>
                                    }
                                    </View>
                                </View>
                            </TouchableOpacity>
                        );
                    })
                }
                </ScrollView>
            </View>
        )
    }
}


const styles = StyleSheet.create({
    body: {
        height: winHeight,
        backgroundColor: Color.VIEW_BGCOLOR,
    },
    zhushi_view: {
        marginLeft: 15,
        marginRight: 15,
        marginTop: 15,
        marginBottom: 0,
        flexDirection: "row",
        justifyContent: "center",
    },
    zhushi_text: {
        color: Color.TEXT_GREY,
        fontSize: 14,
    },
    input_view: {
        padding: 8,
        marginLeft: 0,
        marginRight: 0,
        marginTop: 0,
        marginBottom: 0,
        flexDirection: "row",
        justifyContent: "center",
        backgroundColor: "#ffffff",
        borderBottomWidth: 1,
        borderColor: Color.TEXTINPUT_LINE
    },
    input_label_view: {
        flex: 1,
        flexDirection: "row",
    },
    input_label_text: {
        alignSelf: "center",
    },
    input_value_view: {
        flex: 3,
        alignSelf: "center",
        flexDirection: "row",
        justifyContent: "flex-end",


    },
    btn: {
        padding: 10,
        margin: 15,
        marginBottom: 0,
        borderRadius: 5,
        backgroundColor: Color.BTN_BGCOLOR,
    },
    btn_text: {
        alignSelf: 'center',
        fontSize: 15,
        color: Color.BTN_TEXT
    }


});

module.exports = SetDataSource;
export default SetDataSource;